<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>button</title>
		<meta name="author" content="Administrator" />
		<!-- Date: 2014-05-24 -->
		<link href="../../resources/kendo/styles/kendo.default.min.css" rel="stylesheet" />
		 <link href="../../resources/kendo/styles/kendo.common.min.css" rel="stylesheet" />
		 <script src="../../resources/kendo/js/jquery.min.js"></script>
		<script src="../../resources/kendo/js/kendo.all.min.js"></script>
	</head>
	<body>
		<div id="example" class="k-content">
            <div class="demo-section">
                <div>
                    <h3>Basic Button</h3>
                    <p>
                        <button id="primaryTextButton" class="k-primary">Primary Button</button>
                        <button id="textButton">Button</button>
                    </p>
                </div>

                 <div>
                    <h3>Disabled buttons</h3>
                    <p>
                         <a id="primaryDisabledButton" class="k-primary">Disabled Primary Button</a>
                         <a id="disabledButton">Disabled Button</a>                       
                    </p>
                </div>

                <div>
                   <h3>Buttons with icons</h3>
                    <p>
                        <a id="iconTextButton">Filter</a>
                        <a id="kendoIconTextButton">Clear Filter</a>
                        <em id="iconButton"><span class="k-sprite">Refresh</span></em>
                    </p>
                </div> 
            </div>

            <script>
                $(document).ready(function () {
                    $("#primaryTextButton").kendoButton();

                    $("#textButton").kendoButton();

                    $("#primaryDisabledButton").kendoButton({
                        enable: false
                    });

                    $("#disabledButton").kendoButton({
                        enable: false
                    });

                    $("#iconTextButton").kendoButton({
                        spriteCssClass: "k-icon k-i-funnel"
                    });

                    $("#kendoIconTextButton").kendoButton({
                        icon: "funnel-clear"
                    });

                    $("#iconButton").kendoButton({
                        spriteCssClass: "k-icon k-i-refresh"
                    });               
                });
            </script>
            
            <style scoped>
                .demo-section {
                    width: 290px;
                    padding: 20px 30px;
                }
                .demo-section h3 {
                    padding-top: 10px;
                }
                .demo-section p {
                    margin: 3px 0 20px;
                    line-height: 40px;
                }
                .k-primary {
                    width: 150px;
                }                
            </style>
        </div>
	</body>
</html>

